<template>
  <div class="app-container" style="width:100%;">
    <el-aside style="padding-right: 10px; padding-left: 15px; padding-top: 0px;float:left;width:30%;background:none;">
      <div class="block" style="width:100%;height:500px;">
        <el-tree
          id="el-tree"
          ref="tree"
          class="filter-tree"
          :data="data2"
          node-key="id"
          :highlight-current="true"
          :props="defaultProps"
          :default-expanded-keys="TreeArr"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </div>
    </el-aside>
  </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui'
import { getDictListByCode } from '@/api/dict'

import { getTreeListInAuthority } from '@/api/catalogDetail'

export default {
  name: 'Zzjg',
  inject: ['getList'],
  props: {
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      TreeArr: [],
      IdArr: [],
      data: [],
      data2: [],
      form: {},
      defaultProps: {
        children: 'children',
        label: 'typeName'
      },
      optionProps: {
        value: 'id',
        children: 'children',
        label: 'typeName',
        checkStrictly: true,
        expandTrigger: 'hover'
      },
      id: '',
      parentId: '',
      typeName: '',
      sortNum: '',
      flag: '',
      fenleiList: [],
      upVisible1: false,
      upVisible: false
    }
  },
  created() {
    this.getDictEntry('CDS_CATALOG_TYPE')
  },
  methods: {
    getDictEntry(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_CATALOG_TYPE') {
          this.fenleiList = response.data
        }
      })
    },
    getDetailed() {
      this.data = []

      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      getTreeListInAuthority({ classifyId: this.proid }).then(response => {
        this.data = response.data

        this.data2 = this.buildTree2(this.data)
        this.data2.forEach(m => {
          this.TreeArr.push(m.id)
        })
        loading.close()
      }).catch(response => {
        loading.close()
      })
    },
    buildTree2(data) {
      var rdata = []
      for (let i = 0; i < data.length; i++) {
        var e1 = data[i]
        if (e1.parentId === '1') {
          rdata.push(e1)
        }
        for (let j = 0; j < data.length; j++) {
          var e2 = data[j]
          if (e1.parentId === e2.id) {
            if (!e2.children) {
              e2.children = []
            }
            e2.children.push(e1)
          }
        }
      }
      return rdata
    },
    clickNode($event) {
      $event.target.parentElement.parentElement.firstElementChild.click()
      this.$refs.cascaderHandle.dropDownVisible = false
    },
    change(val) {
      const nodesObj = this.$refs['cascaderHandle'].getCheckedNodes()
      this.flag = nodesObj[0].data.flag
    },
    handleNodeClick(node, data, value) {
      if (node.parentId !== '1') {
        this.id = node.id
        this.parentId = node.parentId
        this.typeName = node.typeName
        this.sortNum = node.sortNum
        this.flag = node.flag
      } else {
        this.id = node.id
        this.parentId = node.parentId
        this.typeName = node.typeName
        this.sortNum = node.sortNum
        this.flag = node.flag
      }
      this.upVisible = true
      this.upVisible1 = false
    },
    onNewData(formName) {
      this.$refs[formName].resetFields()
      this.id = ''
      this.parentId = ''
      this.typeName = ''
      this.sortNum = ''
      this.flag = ''
      this.upVisible = false
      this.upVisible1 = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.id = ''
      this.parentId = ''
      this.typeName = ''
      this.sortNum = ''
      this.flag = ''
      this.upVisible = false
      this.upVisible1 = false
    },
    onSave() {
      if (this.typeName === '' || this.typeName === 'null' || this.typeName === undefined) {
        Message({
          message: '目录名称不能为空',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      this.form.id = this.id

      if (this.parentId !== null && this.parentId !== '' && this.parentId !== undefined) {
        if (Array.isArray(this.parentId)) {
          this.form.parentId = this.parentId[this.parentId.length - 1]
        } else {
          this.form.parentId = this.parentId
        }
      } else {
        this.form.parentId = '1'
      }

      this.form.typeName = this.typeName
      this.form.sortNum = this.sortNum
      this.form.flag = this.flag
      this.form.classifyId = this.proid
      saveData(this.form).then(response => {
        Message({
          message: '新增成功',
          type: 'success',
          duration: 5 * 1000
        })

        loading.close()
        this.getDetailed()
        this.resetForm('form')
        // 重新加载表格
        this.getList()
      }).catch(response => {
        loading.close()
        this.getDetailed()
        // 重新加载表格
        this.getList()
      })
    },
    onRemove() {
      if (this.id !== null && this.id !== undefined && this.id !== '') {
        MessageBox.confirm('确认删除', '确定', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '删除中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          deleteInLogic({ ids: this.id, status: '-1' }).then(response => {
            Message({
              message: '删除成功',
              type: 'success',
              duration: 5 * 1000
            })
            loading.close()
            this.getDetailed()
            this.getList()
          })
        })
      } else {
        Message({
          message: '请选择左侧目录',
          type: 'error',
          duration: 5 * 1000
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
